<!-- 权限管理 -->
<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-row>
      <el-input
        clearable
        class="filter-item"
        style="width: 200px;marginRight:12px"
        v-model="permissionName"
        placeholder="请输入权限名"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="marginRight:12px;"
        @click="getList"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="text"
        @click="handleAddModel"
      >新增</el-button>
    </el-row>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="marginTop:12px;"
    >

      <el-table-column
        align="center"
        width="100px"
        label="序号"
        prop="id"
        sortable
      />

      <el-table-column
        align="center"
        label="名称"
        prop="permission_name"
      />

      <el-table-column
        align="center"
        label="菜单名称"
        prop="menu_name"
      />

      <el-table-column
        align="center"
        label="是否停用"
      >
        <template slot-scope="scope">
          <el-tag>
            {{scope.is_stop == 0 ?'停用':'启用'}}
          </el-tag>

        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleEditModel(scope.row)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDel(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />

    <!-- 用户编辑对话框 -->
    <el-dialog
      :visible.sync="showEditAlert"
      :title="Object.keys(currentModel).length==0?'新增用户信息':'编辑用户信息'"
      width="40%"
    >
      <el-form
        ref="currentProject"
        :model="currentModel"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >

        <el-form-item
          label="名称"
          prop="permission_name"
        >
          <el-input
            v-model="currentModel.permission_name"
            style="width:100%"
          />
        </el-form-item>

        <el-form-item
          label="菜单名称"
          prop="menu_name"
        >
          <el-select
            placeholder="请选择"
            style="width:100%;"
            v-model="currentModel.menu_id"
          >
            <el-option
              :label="obj.menuName"
              v-for="(obj,idx) in menuList"
              :key="idx"
              :value="obj.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="是否停用"
          prop="is_stop"
        >
          <el-radio
            v-model="currentModel.is_stop"
            :label="1"
          >是</el-radio>
          <el-radio
            v-model="currentModel.is_stop"
            :label="0"
          >否</el-radio>
        </el-form-item>

      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="doneSaveModel"
        >保存</el-button>
        <el-button
          type="default"
          @click="showEditAlert = false"
        >取消</el-button>
      </div>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog
      title="确认删除"
      :visible.sync="showDelAlert"
      width="20%"
      :before-close="handleClose"
    >
      <span>确认删除该条记录?</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="default"
          @click="showDelAlert = false"
        >取消</el-button>
        <el-button
          type="danger"
          @click="doneDelModel"
        >删除</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  querySysPermission,
  saveSysPermission,
  deletePermission,
  modifySysPermission,
  findSysMenu,
} from "@/api/user";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import moment from "moment";
export default {
  name: "User",
  components: { Pagination },
  data() {
    return {
      permissionName: "",
      pageNum: 1,
      pageSize: 30,
      list: [
        {
          id: 2,
          dictionaryType: "subjectsType",
          showContent: "成本类",
          dbValue: "cb",
          remarks: "科目类型",
          isDelete: 0,
          creator: null,
          createTime: "2021-08-17T07:28:00.000+00:00",
          updateTime: "2021-08-17T07:28:25.000+00:00",
          updator: null,
        },
      ],
      showEditAlert: false,
      showDelAlert: false,

      total: 0,
      listLoading: false,
      currentModel: {},
      moment: moment,
      menuList: [],
    };
  },
  created() {
    this.getList();
    this.getMenuList();
  },
  methods: {
    getList() {
      let self = this;
      this.listLoading = true;
      querySysPermission({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        permissionName: this.permissionName,
      })
        .then((response) => {
          let { total, list } = response;
          self.list = list;
          self.total = total;
          self.listLoading = false;
        })
        .catch((e) => {
          self.list = [];
          self.total = 0;
          self.listLoading = false;
        });
    },
    getMenuList() {
      let self = this;
      this.listLoading = true;
      findSysMenu({})
        .then((response) => {
          self.menuList = response;
        })
        .catch((e) => {
          debugger;
          self.menuList = [];
        });
    },

    handleClose() {
      this.showDelAlert = false;
    },

    handleDel(data) {
      this.currentModel = data;
      this.showDelAlert = true;
    },

    handleAddModel() {
      this.currentModel = {};
      this.showEditAlert = true;
    },

    handleEditModel(data) {
      this.currentModel = data;
      this.showEditAlert = true;
    },

    doneSaveModel() {
      let self = this;
      if (this.currentModel.id == undefined) {
        saveSysPermission(this.currentModel)
          .then((response) => {
            self.getList();
            self.showEditAlert = false;
          })
          .catch((e) => {
            self.$message.error(`${e}}`);
            self.showEditAlert = false;
          });
      } else {
        modifySysPermission(this.currentModel)
          .then((response) => {
            self.getList();
            self.showEditAlert = false;
          })
          .catch((e) => {
            self.$message.error(`${e}}`);
            self.showEditAlert = false;
          });
      }
    },
    doneDelModel() {
      let self = this;
      deletePermission(this.currentModel.id)
        .then((response) => {
          self.getList();
          self.showDelAlert = false;
        })
        .catch((e) => {
          self.$message.error(`${e}}`);
          self.showDelAlert = false;
        });
    },
  },
};
</script>
